<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <t-card shadow="never" style="width: 1320px">
        <el-form :inline="true" :model="park2">
          <t-button theme="primary" size="large" @click="addRow()">添加车位</t-button>
          &nbsp;
          <t-button theme="primary" variant="outline" size="large" @click="findByCondition()" plain>查询</t-button>
          &nbsp;
          <t-button theme="primary" variant="dashed" size="large" @click="park2={}" plain>清空</t-button>


          <el-form-item label="车位号:" label-width="80px">
            <el-input v-model="park2.parkingNum" filterable style="width: 130px" placeholder="请输入车位号"></el-input>
          </el-form-item>
          <el-form-item label="车位租金:" label-width="80px">
            <el-input v-model="park2.parkingPrice" filterable style="width: 130px"
                      placeholder="请输入车位租金"></el-input>
          </el-form-item>
          <el-form-item label="车位状态:" label-width="80px">
            <el-select v-model="park2.parkingStatus" placeholder="请选择" style="width: 100px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="租出时间:" label-width="80px">
            <el-input v-model="park2.rentTime" filterable style="width: 130px" placeholder="请输入租出时间"></el-input>
          </el-form-item>

        </el-form>
      </t-card>
      <br/>
      <t-card shadow="never" style="width: 1320px">
        <el-table :data="parks" border style="height:425px;">
          <el-table-column prop="parkingId" label="车位ID" align="center">
          </el-table-column>
          <el-table-column prop="parkingNum" label="车位号" align="center">
          </el-table-column>
          <el-table-column prop="parkingPrice" label="车位租金" align="center">
          </el-table-column>
          <el-table-column prop="parkingStatus" label="车位状态" align="center">
          </el-table-column>
          <el-table-column prop="rentTime" label="租出时间" align="center">
          </el-table-column>
          <el-table-column prop="carId" label="车辆ID" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <t-button @click="updateRow(scope)" theme="primary" plain>更改</t-button>
              &ensp;
              <el-popconfirm confirm-button-text='删除' cancel-button-text='不用了' icon="el-icon-info"
                             icon-color="red" title="确定删除吗？" @confirm="deleteRow(scope.$index,scope.row)">
                <t-button slot="reference" theme="primary" variant="outline" plain style="margin-left: 0">
                  删除
                </t-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-pagination background layout="prev, pager, next" :page-count="totalPage" :current-page.sync="currentPage"
                       @current-change="goPage()">
        </el-pagination>
        <el-dialog title="新增车位" :visible.sync="show">
          <el-form :model="park">
            <el-form-item label="车位号:" label-width="80px">
              <el-input v-model="park.parkingNum" autocomplete="off" style="width: 300px"
                        placeholder="请输入车位号"></el-input>
            </el-form-item>
            <el-form-item label="车位租金:" label-width="80px">
              <el-input v-model="park.parkingPrice" autocomplete="off" style="width: 300px"
                        placeholder="请输入租金"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <t-button theme="primary" variant="outline" @click="show = false">取 消</t-button>
            &ensp;
            <t-button theme="primary" @click="addOrUpdate()">确 定</t-button>
          </div>
        </el-dialog>

        <el-dialog title="修改车位信息" :visible.sync="show2">
          <el-form :model="park">
            <el-form-item label="车位号:" label-width="200px">
              <el-input v-model="park.parkingNum" autocomplete="off" style="width: 300px"
                        placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="车位租金:" label-width="200px">
              <el-input v-model="park.parkingPrice" autocomplete="off" style="width: 300px"
                        placeholder="请输入品牌"></el-input>
            </el-form-item>
            <el-form-item label="车位状态:" label-width="200px">
              <el-select v-model="park.parkingStatus" placeholder="请选择" style="width: 200px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="租出时间:" label-width="200px">
              <el-input v-model="park.rentTime" autocomplete="off" style="width: 300px"
                        placeholder="请输入型号"></el-input>
            </el-form-item>
            <el-form-item label="车辆ID:" label-width="200px">
              <el-input v-model="park.carId" autocomplete="off" style="width: 300px"
                        placeholder="请输入型号"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <t-button theme="primary" variant="outline" @click="show2 = false">取 消</t-button>
            &ensp;
            <t-button theme="primary" @click="addOrUpdate()">确 定</t-button>
          </div>
        </el-dialog>
      </t-card>
    </t-card>
  </div>
</template>

<script>
import axios from "axios"
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Carports",
  data() {
    return {
      //选择框
      options: [{
        value: 'y',
        label: '可用'
      }, {
        value: 'n',
        label: '不可用'
      }],
      //查询变量
      parks: [],
      show: false,
      show2: false,
      updateIndex: -1,
      park: {
        parkingId: "",
        parkingNum: "",
        parkingPrice: "",
        parkingStatus: "",
        rentTime: "",
        carId: ""
      },
      park2: {},
      //分页变量
      totalPage: 0,
      currentPage: 1,
      //新增变量
      addReturn: [],
    }
  },
  methods: {
    addRow() {
      this.show = true;
      this.updateIndex = -1;
      this.park = {};
    },
    deleteRow(index, row) {
      axios.post("/api/admin/parking/delete", row);
      MessagePlugin.success('删除成功')
      this.parks.splice(index, 1);
      this.goPage();
    },
    updateRow(scope) {
      this.show2 = true;
      this.updateIndex = scope.$index;
      this.park = scope.row;
    },
    addOrUpdate() {
      if (this.updateIndex == -1) {
        let r = new Array();
        axios.post("/api/admin/parking/add", this.park)
            .then(res => {
              r = res.data.list,
                  MessagePlugin.success('添加成功')
            })
        this.addReturn = r;
        this.parkId = this.addReturn.parkId;
        this.ownerId = this.addReturn.ownerId;
        this.goPage();
        this.park = {};
        this.show = false;
      } else {
        this.parks = this.parks.map((item, index) => {
          if (this.updateIndex === index) {
            return this.park
          }
          return item
        })
        axios.post("/api/admin/parking/update", this.park);
        MessagePlugin.success('修改成功')
        this.park = {};
        this.show2 = false;
      }
    },
    findByCondition() {
      axios.post("/api/admin/parking/findByCondition",
          this.park2
      )
          .then(res => {
            this.parks = res.data.data.list;
            this.totalPage = res.data.data.pages;
            MessagePlugin.success('查询成功')
          })
    },
    goPage() {
      let p = this.currentPage;
      axios.get("/api/admin/parking/all", {
        params: {
          page: p
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.parks = res.data.data.list;
          this.totalPage = res.data.data.pages;
        }
      })
    },
  },
  mounted() {
    axios.get("/api/admin/parking/all")
        .then(res => {
          if (res.data.code == 200 && res.data.data == null) {
            MessagePlugin.warning('暂无数据')
          } else {
            this.parks = res.data.data.list;
            this.totalPage = res.data.data.pages;
          }
        })
  }
}
</script>

<style>
</style>